html {
   font-family: Arial, Helvetica, sans-serif;
   text-align: center;
 }
 h1 {
   font-size: 1.8rem;
   color: white;
 }
 .topnav {
   overflow: hidden;
   background-color: #0A1128;
 }
 body {
   margin: 0;
 }
 .content {
   padding: 50px;
 }
 .card-grid {
   max-width: 600px;
   margin: 0 auto;
   display: grid;
   gap: 2rem;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 .card-title {
   font-size: 1.2rem;
   font-weight: bold;
   color: #034078
 }
 .state {
   font-size: 1.2rem;
   color:#1282A2;
 }
 .switch {
   position: relative;
   display: inline-block;
   width: 120px;
   height: 68px
 }
 .switch input {
   display: none
 }
 .slider {
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   background-color: #ccc;
   border-radius: 50px
 }
 .slider:before {
   position: absolute;
   content: "";
   height: 52px;
   width: 52px;
   left: 8px;
   bottom: 8px;
   background-color: #fff;
   transition: .4s;
   border-radius: 50px;
 }
 /* .card {
   background-color: white;
   box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
 } */
 /* .card {
   max-width: 450px;
   min-height: 100px;
   background: rgba(255, 0, 0, 0.521);
   padding: 10px;
   font-weight: bold;
   font: 25px calibri;
   text-align: center;
   box-sizing: border-box;
   color: blue;
   margin:20px;
   box-shadow: 0px 2px 15px 15px rgba(0,0,0,0.75);
  } */
  .card{
   max-width: 400px;
    min-height: 250px;
    background: #02b875;
    padding: 30px;
    box-sizing: border-box;
    color: #FFF;
    margin:20px;
    box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);
   }
 input:checked+.slider {
   background-color: #b30000;
 }
 input:checked+.slider:before {
   -webkit-transform: translateX(52px);
   -ms-transform: translateX(52px);
   transform: translateX(52px);
 }
 